<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="#111111">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.home.article_list") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <information />
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import information from "./compontents/information";
export default {
  components: {
    information,
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    ...mapActions("mf/home", ["loadArticleHot", "loadArticleList"]),
  },
  computed: {
    ...mapGetters("mf/home", ["articleList"]),
  },
  async onLoad() {
    this.isLoading = true;
    await this.loadArticleHot({
      is_top: 1,
      limit: 3,
    });
    this.loadArticleList();
    this.isLoading = false;
  },
  onReachBottom() {
    //避免多次触发
    if (
      this.articleList.has_next_page &&
      !this.loading["mf.home.article_list"]
    ) {
      this.loadArticleList({
        page: this.articleList.current_page + 1,
      });
    }
  },
};
</script>

<style scoped>
.container {
  padding: 40rpx 20rpx 0;
  box-sizing: border-box;
  width: 100%;
}
</style>